<template>
  <div>
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="totalPage"
      :current-page="pageIndex"
      @current-change="currentChangeHandle"
    >
      <el-form class="p-4" inline>
        <el-form-item>
                  <el-select
                    clearable
                    v-model="userId"
                    :placeholder="$t('system.log.operator_name')"
                    style="width: 230px"
                  >
                    <el-option
                      v-for="item in userPage"
                      :key="item.userId"
                      :label="item.name"
                      :value="item.userId"
                    ></el-option>
                  </el-select>
                </el-form-item>
                
                <el-form-item>
                  <el-select
                    clearable
                    v-model="eventCode"
                    :placeholder="$t('system.log.action')"
                   
                    style="width: 230px"
                  >
                    <el-option
                      v-for="item in eventCodePage"
                      :key="item.eventCode"
                      :label="item.label"
                      :value="item.eventCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-input
                    maxlength="64"
                    v-model="eventDesc"
                    @blur="() => eventDesc = eventDesc.trim()"
                    :placeholder="$t('system.log.event_desc')"
                   
                    style="width: 250px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-date-picker
                    v-model="bindDate"
                    type="daterange"
                    value-format="x"
                    :start-placeholder="$t('common.start_time')"
                    :end-placeholder="$t('common.end_time')"
                   
                    :picker-options="pickerOptions"
                  />
                </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-8" @click="search()">
            <svg-icon icon-class="search" />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :show-overflow-tooltip="true"  :data="dataList" stripe class="passTable">
        <el-table-column key="userName" prop="userName" :label="$t('modules.notify.user_name')" />
        <el-table-column key="eventCode" prop="eventCode" :label="$t('system.log.action')" >
          <template v-slot="scope">
            <span style="margin-left: 10px">{{
              $t('system.common_log_code.' + scope.row.eventCode)
            }}</span>
          </template>
        </el-table-column>
        <el-table-column key="eventDesc" prop="eventDesc" :label="$t('system.log.event_desc')" />
        <el-table-column key="creTime" prop="creTime" :label="$t('common.createTime')">
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.creTime)">
              {{ dateFilter(scope.row.creTime) }}
              {{ scope.row.creTime ? '' : '-' }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { timeFilter, dateFilter } from '@/filters/index'
import { isAuth } from '@/utils'
import PageTitle from '@/components/PageTitle/index.vue'
import { getAllUser } from '@/api/user'
import { getLogList, getActionList } from '@/api/log'

export default {
  props: {
    dataContent: Array
  },
  components: {
    Permissions,
    PageTitle
  },
  data() {
    return {
      dataForm: {
        action: '',
        remark: ''
      },
      actionList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataList: [],
      userPage: [],
      userId: undefined,
      eventCodePage: [],
      eventCode: undefined,
      eventDesc: undefined,
      bindDate: [],
      pickerOptions: {
        onPick:time => {
          //当第一时间选中才设置禁用
          if (time.minDate && !time.maxDate) {
            this.timeOptionRange = time.minDate;
          }
          if (time.maxDate) {
            this.timeOptionRange = null;
          }
        },
        disabledDate:time => {
          let timeOptionRange = this.timeOptionRange;
          let secondNum = 60 * 60 * 24 * 3*30 * 1000;
          if (timeOptionRange) {
            return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum;
          }
        }
      }
    }
  },
  mounted() {
    const now = Date.now()
      const endTime = new Date(now)
      const startTime = new Date(now - 7 * 24 * 3600 * 1000)
      this.bindDate[0] = startTime.getTime()
      this.bindDate[1] = endTime.getTime()
      this.getAllUser()
      this.getActionList()
      this.search()
  },
  methods: {
    isAuth,
    timeFilter,
    dateFilter,
    getAllUser() {
      getAllUser({ condition: '', platCode: 'PASS' }).then((res) => {
        this.userPage = res
        console.log(this.userPage)
      }).catch((e) => {
        this.$confirmError(e)
      })
    },
    getActionList() {
      getActionList({
        orgId: this.$store.getters.userInfo.orgId
      }).then((res) => {
        console.log(res)
        this.eventCodePage = []
        res.forEach((item) => {
          const eventItem = {}
          eventItem.eventCode = item
          console.log('system.toms_log_code.' + item)
          eventItem.label = this.$t('system.common_log_code.' + item)
          this.eventCodePage.push(eventItem)
        })
        console.log(JSON.stringify(this.eventCodePage))
      }).catch((e) => {
        this.$confirmError(e)
      })
    },
    currentChangeHandle(val) {
      this.pageIndex = val
      this.search()
    },
    search() {
      this.dataListLoading = true
      let startTime, endTime
      if (this.bindDate === null || this.bindDate === undefined
        || this.bindDate[0] === null || this.bindDate[0] === undefined
        || this.bindDate[1] === null || this.bindDate[1] === undefined) {
        this.$message.error(
          this.$t('system.log.select_time_range')
        )
        this.dataListLoading = false
        return false
      }
      if (this.bindDate) {
        this.bindDate.forEach((val, index) => {
          if (index === 0) {
            startTime = Math.round(val / 1000)
          } else if (index === 1) {
            endTime = Math.round(val / 1000) + 24 * 60 * 60
          }
        })
      }
    getLogList({
      pageNo: this.pageIndex,
      pageSize: this.pageSize,
      orgId: this.$store.getters.userInfo.orgId,
      userId: this.userId,
        eventCode: this.eventCode,
        condition: this.eventDesc,
        startTime: startTime,
        endTime: endTime
      }).then((res) => {
        this.dataListLoading = false
        this.dataList = res.data
        this.totalPage = res.rows
        console.log(res.data)
      }).catch((e) => {
        this.dataListLoading = false
        this.$confirmError(e)
      })

    }

  }
}
</script>
